<template>
  <MyDemo />
</template>

<script setup name="App">
import { ref, provide, reactive, readonly } from 'vue'
import MyDemo from './components/MyDemo'

const username = ref('张辉')
const userInfo = reactive({
  name: 'hh',
  age: 19
})
provide('username', username)
provide('userInfo', userInfo)

const location = ref('North Pole')
function updateLocation() {
  location.value = 'South Pole'
}
// 在注入方组件中更改数据。在这种情况下，我们推荐在供给方组件内声明并提供一个更改数据的方法函数：
provide('location', {
  location,
  updateLocation
})

// 确保提供的数据不能被注入方的组件更改，你可以使用 readonly() 来包装提供的值。
const count = ref(0)
provide('read-only-count', readonly(count))
</script>

<style>
</style>
